﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="Help Documentation, file, file input, jQuery, jQWidgets, jqxFileUpload, widget" />
    <meta name="description" content="This page represents the help documentation of the jqxFileUpload widget." />
    <title>jqxFileUpload API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties
        </h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.
                        </p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
                                    <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt; </code></pre>
                                </code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.</li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8rb3ghxh/">theme
                                is set to 'energyblue'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxFileUpload's width.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ width: 300 });</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxFileUpload').jqxFileUpload('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8rb3ghxh/">width
                                is set to 400</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    'auto'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxFileUpload's height.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ height: '150px' });</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxFileUpload').jqxFileUpload('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/z8oqe6bv/">height
                                is set to 150</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>uploadUrl</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the upload URL. This property corresponds to the upload form's <code>action</code>
                            attribute. For example, the uploadUrl property can point to a PHP file, which to
                            handle the upload operation server-side. Here is a sample PHP file that allows only
                            images no larger than 500 kB to be uploaded to the server:</p>
<pre style='width: 700px; max-width: 700px; margin: 10px;' class='code'>&lt;?php<div/>$target_dir = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"uploads/"</span>;<div/>$target_file = $target_dir . basename($_FILES[<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"fileToUpload"]["name"</span>]);<div/>$uploadOk = 1;<div/>$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);<div/>// Check if image file is a actual image or fake image<div/>if(isset($_POST[<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"submit"</span>])) {<div/>    $check = getimagesize($_FILES[<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"fileToUpload"]["tmp_name"</span>]);<div/>    if($check !== false) {<div/>        echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"File is an image - " . $check["mime"] . "."</span>;<div/>        $uploadOk = 1;<div/>    } else {<div/>        echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"File is not an image."</span>;<div/>        $uploadOk = 0;<div/>    }<div/>}<div/>// Check if file already exists<div/>if (file_exists($target_file)) {<div/>    echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sorry, file already exists."</span>;<div/>    $uploadOk = 0;<div/>}<div/>// Check file size<div/>if ($_FILES[<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"fileToUpload"]["size"</span>] &gt; 500000) {<div/>    echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sorry, your file is too large."</span>;<div/>    $uploadOk = 0;<div/>}<div/>// Allow certain file formats<div/>if($imageFileType != <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"jpg" &amp;&amp; $imageFileType != "png" &amp;&amp; $imageFileType != "jpeg"</span><div/>&amp;&amp; $imageFileType != <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"gif"</span> ) {<div/>    echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sorry, only JPG, JPEG, PNG &amp; GIF files are allowed."</span>;<div/>    $uploadOk = 0;<div/>}<div/>// Check if $uploadOk is set to 0 by an error<div/>if ($uploadOk == 0) {<div/>    echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sorry, your file was not uploaded."</span>;<div/>// if everything is ok, try to upload file<div/>} else {<div/>    if (move_uploaded_file($_FILES[<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"fileToUpload"]["tmp_name"</span>], $target_file)) {<div/>        echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded."</span>;<div/>    } else {<div/>        echo <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Sorry, there was an error uploading your file."</span>;<div/>    }<div/>}<div/>?&gt;<div/></pre>
                        <br />
                        <p>
                            <em>A few notes about file uploads in PHP:</em></p>
                        <p>
                            Many shared hosting servers allow a very low maximum file upload size. If you plan
                            on accepting larger files, you should consider a dedicated or virtual dedicated
                            server. To adjust the file upload size in PHP, modify the php.ini file's "upload_max_filesize"
                            value. You can also adjust this value using PHP's .ini_set() function. The file
                            upload counts towards the hosting environment's $_POST size, so you may need to
                            increase the php.ini file's post_max_size value. Be sure to do a lot of file validation
                            when allowing users to upload files. How horrible would it be to allow a user to
                            upload a .exe file to your server? They could do horrible things on the server.</p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>uploadUrl</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ uploadUrl: 'upload.php' });</code></pre>
                        <p>
                            Get the <code>uploadUrl</code> property.
                        </p>
                        <pre><code>var uploadUrl = $('#jqxFileUpload').jqxFileUpload('uploadUrl');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lvyujd10/">uploadUrl
                                is set to a custom string.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>fileInputName</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the <code>name</code> attribute of the hidden file input which is submitted
                            to the URL specified by the <code>uploadUrl</code> property. This name is applied
                            to the file input of the file about to be uploaded and after the upload the name
                            attribute is removed so that it can be set to the next hidden file input (if any).
                            As a result, there is only one file input with this name attribute at a time.
                        </p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>fileInputName</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ fileInputName: 'fileToUpload' });</code></pre>
                        <p>
                            Get the <code>fileInputName</code> property.
                        </p>
                        <pre><code>var fileInputName = $('#jqxFileUpload').jqxFileUpload('fileInputName'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/opcdqgym/">fileInputName
                                is set to a custom string</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>autoUpload</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether files will be automatically uploaded when selected.
                        </p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>autoUpload</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ autoUpload: true });</code></pre>
                        <p>
                            Get the <code>autoUpload</code> property.
                        </p>
                        <pre><code>var autoUpload = $('#jqxFileUpload').jqxFileUpload('autoUpload');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8gv398yh/">autoUpload
                                is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>multipleFilesUpload</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether multiple files selection and upload are allowed.
                        </p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>multipleFilesUpload</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ multipleFilesUpload: false });</code></pre>
                        <p>
                            Get the <code>multipleFilesUpload</code> property.
                        </p>
                        <pre><code>var multipleFilesUpload = $('#jqxFileUpload').jqxFileUpload('multipleFilesUpload');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e3zshL7L/">multipleFilesUpload
                                is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>accept</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the file types that can be submitted to the server through jqxFileUpload.
                            This property corresponds to the <code>accept</code> attribute of the hidden file
                            input which is submitted to the URL specified by the <code>uploadUrl</code> property.
                        </p>
                        <b>Possible values:</b>
                        <pre><code>any file extension, for example: '.gif', '.jpg', '.png', '.doc', etc.</code></pre>
                        <pre><code>'audio/*' - all sound files are accepted.</code></pre>
                        <pre><code>'video/*' - all video files are accepted.</code></pre>
                        <pre><code>'image/*' - all image files are accepted.</code></pre>
                        <pre><code>any valid media type. For a list, please refer to <a href="http://www.iana.org/assignments/media-types/media-types.xhtml" target="_blank">IANA Media Types</a>.</code></pre>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>accept</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ accept: 'image/*' });</code></pre>
                        <p>
                            Get the <code>accept</code> property.
                        </p>
                        <pre><code>var accept = $('#jqxFileUpload').jqxFileUpload('accept');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/scomLbwj/">accept
                                is set to 'image/*'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>browseTemplate</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the template applied to the 'Browse' button.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'default' - the default button's template. The button's style depends only on the 'theme' property value.</code></pre>
                        <pre><code>'primary' - dark blue button for extra visual weight.</code></pre>
                        <pre><code>'success' - green button for successful or positive action.</code></pre>
                        <pre><code>'warning' - orange button which indicates caution.</code></pre>
                        <pre><code>'danger' - red button which indicates a dangerous or negative action.</code></pre>
                        <pre><code>'inverse' - dark gray button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'link' - making it look like a link.</code></pre>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>browseTemplate</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ browseTemplate: 'success' });</code></pre>
                        <p>
                            Get the <code>autoUpload</code> property.
                        </p>
                        <pre><code>var browseTemplate = $('#jqxFileUpload').jqxFileUpload('browseTemplate');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uo9makg4/">browseTemplate
                                is set to 'primary'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>uploadTemplate</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the template applied to the 'Upload All' button.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'default' - the default button's template. The button's style depends only on the 'theme' property value.</code></pre>
                        <pre><code>'primary' - dark blue button for extra visual weight.</code></pre>
                        <pre><code>'success' - green button for successful or positive action.</code></pre>
                        <pre><code>'warning' - orange button which indicates caution.</code></pre>
                        <pre><code>'danger' - red button which indicates a dangerous or negative action.</code></pre>
                        <pre><code>'inverse' - dark gray button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'link' - making it look like a link.</code></pre>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>uploadTemplate</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ uploadTemplate: 'primary' });</code></pre>
                        <p>
                            Get the <code>uploadTemplate</code> property.
                        </p>
                        <pre><code>var uploadTemplate = $('#jqxFileUpload').jqxFileUpload('uploadTemplate');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e274rnhq/">uploadTemplate
                                is set to 'warning'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>cancelTemplate</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the template applied to the 'Cancel All' button.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'default' - the default button's template. The button's style depends only on the 'theme' property value.</code></pre>
                        <pre><code>'primary' - dark blue button for extra visual weight.</code></pre>
                        <pre><code>'success' - green button for successful or positive action.</code></pre>
                        <pre><code>'warning' - orange button which indicates caution.</code></pre>
                        <pre><code>'danger' - red button which indicates a dangerous or negative action.</code></pre>
                        <pre><code>'inverse' - dark gray button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre>
                        <pre><code>'link' - making it look like a link.</code></pre>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>cancelTemplate</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ cancelTemplate: 'inverse' });</code></pre>
                        <p>
                            Get the <code>cancelTemplate</code> property.
                        </p>
                        <pre><code>var cancelTemplate = $('#jqxFileUpload').jqxFileUpload('cancelTemplate');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qesg1pwe/">cancelTemplate
                                is set to 'danger'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>localization</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the various text values used in the widget. Useful for localization.
                        </p>
                        <p>
                            The localization object has the following fields:</p>
                        <pre><code>browseButton - sets the text of the 'Browse' button.</code></pre>
                        <pre><code>uploadButton - sets the text of the 'Upload All' button.</code></pre>
                        <pre><code>cancelButton - sets the text of the 'Cancel All' button.</code></pre>
                        <pre><code>uploadFileTooltip - sets the text of the 'Upload File' tooltip.</code></pre>
                        <pre><code>cancelFileTooltip - sets the text of the 'Cancel' tooltip.</code></pre>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>localization</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ localization: { browseButton: 'Blättern', uploadButton: 'Laden Sie alle', cancelButton: 'alle Abbrechen', uploadFileTooltip: 'Datei hochladen', cancelFileTooltip: 'aufheben' } });</code></pre>
                        <p>
                            Get the <code>localization</code> property.
                        </p>
                        <pre><code>var localization = $('#jqxFileUpload').jqxFileUpload('localization');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ghnmp6r4/">localization
                                is set to a custom object.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>renderFiles</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            A callback function used for rendering the file selection rows.
                        </p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>renderFiles</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ width: 300, uploadUrl: 'upload.php', fileInputName: 'fileToUpload',
    renderFiles: function (fileName) {
        var stopIndex = fileName.indexOf('.');
        var name = fileName.slice(0, stopIndex);
        var extension = fileName.slice(stopIndex);
        return name + '&lt;strong&gt;' + extension + '&lt;/strong&gt;';
    }
}); </code></pre>
                        <p>
                            Get the <code>renderFiles</code> property.
                        </p>
                        <pre><code>var renderFiles = $('#jqxFileUpload').jqxFileUpload('renderFiles');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fq3st28h/">renderFiles
                                is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the jqxFileUpload.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ disabled: false });</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxFileUpload').jqxFileUpload('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/73qmxdq0/">disabled
                                is set to true </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a value indicating whether widget's elements are aligned to support
                            locales using right-to-left fonts.
                        </p>
                        <h4>
                            Code example
                        </h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload({ rtl : true });</code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxFileUpload').jqxFileUpload('rtl');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/s5fu604a/">rtl
                                is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events
                    </h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>select</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a file has been selected.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>select</code> event by type: jqxFileUpload.
                        </p>
                        <pre><code>$('#jqxFileUpload').on('select', function (event) {
    var fileName = event.args.file;
    // Your code here.
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yefLatk3/">Bind
                                to the select event by type: jqxFileUpload. </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>remove</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a file row has been removed.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>remove</code> event by type: jqxFileUpload.
                        </p>
                        <pre><code>$('#jqxFileUpload').on('remove', function (event) {
    var fileName = event.args.file;
    // Your code here.
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lhbsdh1s/">Bind
                                to the remove event by type: jqxFileUpload.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>uploadStart</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a file upload operation has started.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>uploadStart</code> event by type: jqxFileUpload.
                        </p>
                        <pre><code>$('#jqxFileUpload').on('uploadStart', function (event) {
    var fileName = event.args.file;
    // Your code here.
}); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d95so4k3/">Bind
                                to the uploadStart event by type: jqxFileUpload. </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>uploadEnd</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a file upload operation has ended.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Bind to the <code>uploadEnd</code> event by type: jqxFileUpload.
                        </p>
                        <pre><code>$('#jqxFileUpload').on('uploadEnd', function (event) {
    var args = event.args;
    var fileName = args.file;
    var serverResponce = args.response;
    // Your code here.
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u2pzf3e6/">Bind
                                to the uploadEnd event by type: jqxFileUpload. </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods
                    </h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Renders the widget.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('render');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2yLcxgau/">render
                                the jqxFileUpload</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the widget.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('refresh'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/166qn1mc/">refresh
                                the jqxFileUpload</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the jqxFileUpload.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('destroy'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9m72b294/">destroy
                                the jqxFileUpload</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>browse</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Browses for a file.</p>
                        <p>
                            <em>Note:</em> due to browser restrictions, this method would not work on Internet
                            Explorer 9 or earlier.</p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>browse</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('browse');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qocqou3m/">browse
                                for a file</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>uploadFile</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Uploads a selected file.</p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>uploadFile</code> method.
                        </p>
                        <pre><code>// @param int. The expected parameter is the file index.
                        
$('#jqxFileUpload').jqxFileUpload('uploadFile', 1);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6q7h9xcj/">upload
                                a file</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>uploadAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Uploads all selected files.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>uploadAll</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('uploadAll');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3u0rmp8w/">upload
                                all files</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>cancelFile</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Cancels a selected file.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>cancelFile</code> method.
                        </p>
                        <pre><code>// @param int. The expected parameter is the file index.
                        
$('#jqxFileUpload').jqxFileUpload('cancelFile', 3);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uxqbu3aL/">cancel
                                a file</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>cancelAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Cancels all selected files.
                        </p>
                        <h4>
                            Code examples
                        </h4>
                        <p>
                            Invoke the <code>cancelAll</code> method.
                        </p>
                        <pre><code>$('#jqxFileUpload').jqxFileUpload('cancelAll');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f91fLcLr/">cancel
                                all files</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
